<template>
  <div class="relative">
    <!-- 用户卡片和左右按钮的容器 -->
    <div class="relative flex items-center gap-3">
      <!-- 左切换按钮 -->
      <button
        v-if="users.length > 1"
        :disabled="currentIndex === 0"
        class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-card border border-border hover:bg-accent hover:text-accent-foreground transition-colors disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center group"
        :title="currentIndex === 0 ? t('login.firstUser') : t('login.previousUser')"
        @click="previousUser">
        <svg
          class="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:scale-110"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>

      <!-- 用户卡片容器 -->
      <div class="flex-1 overflow-hidden rounded-lg">
        <div
          class="flex transition-transform duration-300 ease-in-out"
          :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
          <div v-for="user in users" :key="user.id" class="w-full flex-shrink-0">
            <UserCard :user="user" :loading="loginLoading" @login="$emit('login', $event)" />
          </div>
        </div>
      </div>

      <!-- 右切换按钮 -->
      <button
        v-if="users.length > 1"
        :disabled="currentIndex === users.length - 1"
        class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-card border border-border hover:bg-accent hover:text-accent-foreground transition-colors disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center group"
        :title="currentIndex === users.length - 1 ? t('login.lastUser') : t('login.nextUser')"
        @click="nextUser">
        <svg
          class="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:scale-110"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>

    <!-- 用户指示器和计数 -->
    <div v-if="users.length > 1" class="flex items-center justify-center mt-6 gap-4">
      <!-- 用户指示器 -->
      <div class="flex space-x-2">
        <div
          v-for="(_, index) in users"
          :key="index"
          :class="[
            'w-2 h-2 rounded-full transition-all duration-200 cursor-pointer',
            index === currentIndex ? 'bg-primary scale-125' : 'bg-muted hover:bg-muted-foreground/30 hover:scale-110'
          ]"
          :title="`${t('login.switchToUser')} ${index + 1}`"
          @click="currentIndex = index">
        </div>
      </div>
    </div>

    <!-- 单个用户时的用户指示 -->
    <div v-else class="text-center mt-4">
      <div class="inline-flex items-center text-text-secondary text-sm">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
        1 {{ t('login.userCount') }}
      </div>
    </div>

    <!-- 创建新用户按钮 -->
    <div class="mt-8 text-center">
      <button
        class="inline-flex items-center px-4 py-2 text-primary hover:text-primary-hover text-sm font-medium transition-colors rounded-md hover:bg-primary/5"
        @click="$emit('create-user')">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        {{ t('login.createUser') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserInfo } from '@shared/types.d';
import { ref, watch } from 'vue';

import { t } from '@/i18n';

import UserCard from './UserCard.vue';

interface Props {
  users: UserInfo[];
  loginLoading?: boolean;
  initialIndex?: number;
}

const props = withDefaults(defineProps<Props>(), {
  loginLoading: false,
  initialIndex: 0
});

defineEmits<{
  login: [user: UserInfo];
  'create-user': [];
}>();

const currentIndex = ref(props.initialIndex);

// 监听用户列表变化，重置索引
watch(
  () => props.users,
  (newUsers) => {
    if (currentIndex.value >= newUsers.length) {
      currentIndex.value = Math.max(0, newUsers.length - 1);
    }
  }
);

// 监听外部索引变化
watch(
  () => props.initialIndex,
  (newIndex) => {
    currentIndex.value = newIndex;
  }
);

// 切换到上一个用户
const previousUser = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

// 切换到下一个用户
const nextUser = () => {
  if (currentIndex.value < props.users.length - 1) {
    currentIndex.value++;
  }
};

// 暴露当前索引给父组件
defineExpose({
  currentIndex
});
</script>
